import React from 'react'

const AboutPage: React.FC = () => {
  return (
    <div className="container px-6 py-8">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-4xl font-bold mb-8 bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
          Hello, World! 👋
        </h1>

        <div className="glass-card p-8 space-y-6">
          <div className="flex items-center space-x-4 mb-6">
            <div className="w-16 h-16 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white text-2xl">
              😁
            </div>
            <div>
              <h2 className="text-xl font-semibold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
                博主：七安
              </h2>
              <p className="text-gray-600 dark:text-gray-300 mt-1">
                热爱技术，追求极致，永远保持学习的激情
              </p>
            </div>
          </div>

          <div className="space-y-4">
            <p className="text-lg text-gray-700 dark:text-gray-200 leading-relaxed">
              作为一名拥有4年经验的前端开发工程师，我专注于打造优秀的用户体验和高性能的web应用。在大型C端、B端项目中积累了丰富的实战经验。
            </p>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
              <div className="p-4 rounded-lg bg-blue-50 dark:bg-blue-900/20">
                <h3 className="font-semibold text-blue-600 dark:text-blue-400 mb-2">
                  💻 技术栈
                </h3>
                <p className="text-gray-700 dark:text-gray-300">
                  精通 React、Vue
                  等主流框架，对现代前端技术充满热情。深入研究性能优化、微前端架构，具备丰富的工程化实践经验。
                </p>
              </div>
              <div className="p-4 rounded-lg bg-purple-50 dark:bg-purple-900/20">
                <h3 className="font-semibold text-purple-600 dark:text-purple-400 mb-2">
                  📱 移动端
                </h3>
                <p className="text-gray-700 dark:text-gray-300">
                  熟练掌握 React Native、Taro、UniApp
                  等跨端解决方案，构建过多个高性能移动应用。
                </p>
              </div>
              <div className="p-4 rounded-lg bg-green-50 dark:bg-green-900/20">
                <h3 className="font-semibold text-green-600 dark:text-green-400 mb-2">
                  🛠 工程能力
                </h3>
                <p className="text-gray-700 dark:text-gray-300">
                  擅长前端性能优化、埋点监控、日志系统搭建。具备完整的前端工程化思维，包括CI/CD、自动化测试等。
                </p>
              </div>
              <div className="p-4 rounded-lg bg-yellow-50 dark:bg-yellow-900/20">
                <h3 className="font-semibold text-yellow-600 dark:text-yellow-400 mb-2">
                  🔮 创新领域
                </h3>
                <p className="text-gray-700 dark:text-gray-300">
                  对AI领域充满热情，有AIGC应用开发经验。熟悉Node.js全栈开发，具备企业级权限管理系统开发经验。
                </p>
              </div>
            </div>

            <div className="space-y-4">
              <h3 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
                🏆 项目经历
              </h3>

              <div className="space-y-3">
                <div className="group hover:bg-blue-50 dark:hover:bg-blue-900/20 p-4 rounded-lg transition-all">
                  <h4 className="font-medium text-blue-600 dark:text-blue-400">
                    C端项目
                  </h4>
                  <a
                    href="https://www.alibaba.com"
                    className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
                  >
                    阿里巴巴 - 全球领先的B2B贸易平台
                  </a>
                </div>

                <div className="group hover:bg-purple-50 dark:hover:bg-purple-900/20 p-4 rounded-lg transition-all">
                  <h4 className="font-medium text-purple-600 dark:text-purple-400">
                    B端项目
                  </h4>
                  <a
                    href="https://auth.prod.dahuangf.com/login?redirect=https://admin.prod.dahuangf.com/dashboard"
                    className="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors"
                  >
                    企业级中台解决方案
                  </a>
                </div>

                <div className="group hover:bg-green-50 dark:hover:bg-green-900/20 p-4 rounded-lg transition-all">
                  <h4 className="font-medium text-green-600 dark:text-green-400">
                    移动端作品
                  </h4>
                  <p className="text-gray-700 dark:text-gray-300">
                    • 擎天 App - 创新的企业管理解决方案
                    <br />
                    • 阿里巴巴国际版 - 跨境电商移动应用
                    <br />• 洗了么小程序 - 便捷的生活服务平台
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default AboutPage
